<template>
  <input type="file" @change="onChange" />
</template>

<script lang="ts" setup>
function onChange(event: Event) {
  // 1. 获取 file
  const file = (event.target as HTMLInputElement).files?.[0] as File
  console.log('file', file)

  // 2. 定义一个切片集合
  const chunkList = []

  // 3. 定义一个切片的大小 字节单位   5M
  const chunkSize = 1024 * 1024 * 5

  // 4. 计算出切片的数量
  const chunkNum = Math.ceil(file.size / chunkSize)
  // console.log('chunkNum', chunkNum)
  // file?.slice(start, end)
  // 5. 循环切片
  for (let i = 0; i < chunkNum; i++) {
    // 起点
    const start = i * chunkSize
    // 终点
    const end = start + chunkSize >= file.size ? file.size : start + chunkSize

    const chunk = file.slice(start, end)
    // console.log('chunk', chunk)
    chunkList.push(chunk)
  }

  console.log('chunkList', chunkList)
}
</script>
